<template>
    <!-- 头部 -->
    <header class="app-header">
        <div class="logo">
          <img src="./Login/image_login/logo2.png" alt="Logo" class="logo-image" />
          <h1 class="app-name">医院门诊管理系统</h1>
        </div>
        <nav class="app-nav">
          <ul>
            <!-- <li><a href="#" @click.prevent="submit()">首页</a></li> -->
            <li><a href="#"@click="submit">用户登陆</a></li>
            <li><a href="#"@click.prevent="submit2()">账号注销</a></li>
            <li><a href="#">{{ liu }}</a></li>
            <li ><a href="#"@click.prevent="hdy()">退出登陆</a></li>
          </ul>
        </nav>
      </header>
      <!-- 展示区 -->
      
        <router-view></router-view>

    
<!-- <login/> -->

 <!-- <register/> -->
</template>

<script  setup >
import {useRoute,useRouter} from 'vue-router'
import { ref,onMounted } from 'vue';
import axios from 'axios';
let liu=ref("用户登陆");
let sys=ref(2);
const router = useRouter();
  const submit=()=>{
    router.push("/")
  }
  const submit2=()=>{
        const result = confirm("你确定要注销此账号吗?");
    if (result) {
      const wei = localStorage.getItem('username2');
      let intWei = parseInt(wei ?? "0");  
      const wei1 = localStorage.getItem('sys');
  console.log(JSON.stringify(wei1))
  sys.value = parseInt(wei1 ?? "0");  
      console.log(intWei);
      if(sys==2){
        axios.delete(`http://zhsj.autumnclouds.cn/patient/${intWei}`)
          .then(response => {
            console.log('病人信息:', response.data);
            alert("注销成功!")
            localStorage.clear();
            router.push("/")
          })
          .catch(error => {
            console.error('获取病人信息失败:', error);
          });
      }else if(sys==1){
        axios.delete(`http://zhsj.autumnclouds.cn/doctor/${intWei}`)
          .then(response => {
            console.log('病人信息:', response.data);
            alert("注销成功!")
            localStorage.clear();
            router.push("/")
          })
          .catch(error => {
            console.error('获取病人信息失败:', error);
          });
      }
       

    } else {
      console.log("用户点击了取消");
    }

    router.push("/")
  }
  const hdy=()=>{
    localStorage.clear();
    alert("退出登陆成功!");
    router.push("/")
  }
  onMounted(() => {
    const wei = localStorage.getItem('username3');
    console.log(JSON.stringify(wei));
    liu.value="用户"+JSON.stringify(wei);
    console.log(liu);
});
</script>

<style>
    .app{
        background-color: aliceblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
     /* 头部样式 */
  .app-header {
    background: linear-gradient(135deg, hsl(255, 255, 255), #acb6e5);
    color: #262323;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-style: italic;
    font-family: 'Courier New', Courier, monospace;
  }
  
  .logo {
    display: flex;
    align-items: center;
  }
  
  .logo-image {
    width: 100px;
    height: 80px;
    margin-right: 10px;
  }
  
  .app-name {
    font-size: 24px;
    font-weight: bold;
  }
  
  .app-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .app-nav li {
    margin: 0 15px;
  }
  
  .app-nav a {
    color: #151414;
    text-decoration: none;
    font-size: 16px;
  }
  
  .app-nav a:hover {
    text-decoration: underline;
  }
  .content{
    height: auto;
    background: linear-gradient(135deg, #74ebd5, #acb6e5);
  }
</style>